import React from 'react';
import { Button } from 'antd';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

import "./index.less";

const SortableList = SortableContainer(({picInfoArr}) => {
    const SortableItem = SortableElement(({value}) =>
        <li className="thumbnailsItem">
            <div className="sortableItem">
            {/*"blob:http://localhost:3000/788dd4f0-92d0-4084-a34c-e0e244e8fe26"*/}
                <img src={value.url} alt="medical report"/>
            </div>
        </li>
    );

    return (
      <ul className="thumbnailsList" style={{minHeight:600}}>
        {picInfoArr.map((value, index) => (
          <SortableItem key={`item-${index}`} index={index} value={value}/>
        ))}
      </ul>
    );
  });

export default SortableList;